VitestのTest Environment

GPT-4.icon

✅ 概要

Vitest では、テストを特定の「環境（environment）」で実行することができます。

例えば、

Node.js環境（デフォルト）

といった環境を指定して、コードの挙動を切り替えながらテストできる機能です。

✅ 標準の環境 (Built-in Environments)

Vitestにはデフォルトで以下の環境が用意されています。

table:table

環境名 説明

:--- :---

✅ 注意点

Node.js上でのみ"環境"は存在する。

ブラウザモードでは「環境」という考え方はありません。

ブラウザモードで動かしたいなら、workspaceプロジェクトを分ける必要があります。

✅ ファイルごとに環境を指定する方法

設定ファイルだけでなく、ファイル単位で環境を変えることも可能です。

ファイルの先頭に、次のようなコメントを書く：

code:ts

// @vitest-environment jsdom

import { expect, test } from 'vitest'

test('test', () => {

expect(typeof window).not.toBe('undefined')

})

✅ カスタム環境 (Custom Environment)

独自に環境を作りたい場合は、次の2通りが可能です。

2. または ローカルのJS/TSファイルを指定する

必要な実装例はこんな感じ：

code:ts

import type { Environment } from 'vitest/environments'

export default <Environment>{

name: 'custom', // 環境名

transformMode: 'ssr', // 必須: 'ssr' or 'web' (どちらのコード変換モードか)

async setupVM() { // optional: VM環境（experimental-vm pool対応）

const vm = await import('node:vm')

const context = vm.createContext()

return {

getVmContext() { return context },

teardown() { /* 片付け処理 */ }

}

},

setup() { // テスト開始時に呼ばれる

return {

teardown() { /* 片付け処理 */ }

}

}

}

【重要】

✅ 便利ツール：populateGlobal

Vitestでは、オブジェクトのプロパティをグローバルスコープに移すユーティリティ関数も提供しています。

code:ts

import { populateGlobal } from 'vitest/environments'

populateGlobal(globalThis, { foo: 'bar' }, { bindFunctions: true })